<!doctype html>
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<html lang="en-us">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Vista HTML - Documentation</title>
<meta name="description" content="Documentation for Accord HTML site template." />
<meta name="author" content="magikcommerce" />
<meta name="copyright" content="magikcommerce" />
<meta name="generator" content="Documenter v1.3 http://rxa.li/documenter" />
 <link rel="stylesheet" href="css/documenter_style.css" media="all" />

        <script src="js/jquery.1.5.1.js"></script>

        <script src="js/jquery.scrollTo-1.4.2-min.js"></script>
        <script src="js/jquery.easing.js"></script>

        <link rel="stylesheet" href="css/shDocumenter.css" media="screen" />
        <script src="js/shCore.js"></script>
        <script src="js/shBrushCss.js"></script>
        <script src="js/shBrushXml.js"></script>
        <script src="js/shBrushJScript.js"></script>
        <script>SyntaxHighlighter.defaults['toolbar'] = false;
            SyntaxHighlighter.all();</script>

        <script>document.createElement('section');
            var duration = 500, easing = 'swing';</script>
        <script src="js/script.js"></script>
<style>
html {
	background-color: #f9f7f5;
	color: #383838;
}
            ::-moz-selection {
background:#fcd355;
}
::selection {
	background: #fcd355;
}
#documenter_sidebar #documenter_logo {
	margin: 40px;
}
a {
	color: #333;
}
#documenter_content a {
	color: #FF4C4C;
}
hr {
	border-top: 1px solid #e3e3e3;
	border-bottom: 1px solid #FFFFFF;
}
#documenter_sidebar, #documenter_sidebar ol a {
	background: #eee;
	color: #eee;
}

#documenter_sidebar ol a {
	background: #252525;
	border-bottom: 1px solid #333;
	color: #fff;
}
#documenter_sidebar ol a:hover {
	background: #7bbd42;
	color: #fff;
	border-bottom: 1px solid #333;
}
#documenter_sidebar ol a.current {
	background: #7bbd42;
	color: #fff;
}
#documenter_copyright {
	display: block !important;
	visibility: visible !important;color: #333;
}
</style>
</head>
<body>
<div id="documenter_sidebar"> <a href="http://themeforest.net/user/magikcommerce" id="documenter_logo"><img src="css/img/logo.png" width="134" height="38" alt="Logo"><br>
  HTML5</a>
  <ol id="documenter_nav">
    <li><a class="current" href="#documenter_cover">Start</a></li>
    <li><a href="#folder_structure">Folder Structure</a></li>
    <li><a href="#html_structure">HTML Structure</a></li>
    <li><a href="#css_files_and_structure">CSS Files and Structure</a></li>
    <li><a href="#javascript">JavaScript</a></li>
    <li><a href="#sources_and_credits">Sources and Credits</a></li>
  </ol>
  <div id="documenter_copyright">Copyright Magikcommerce 2015<br>
    </div>
</div>
<div id="documenter_content">
  <section id="documenter_cover">
    <h1>Vista HTML</h1>
    <h2>Premium HTML 5 website</h2>
    <hr>
    <ul>
      <li>Created: August 2015.</li>
      <li>By: Magikcommerce - Envato author <a href="http://themeforest.net/user/magikcommerce"> Profile </a></li>
    </ul>
    <p>Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to contact us via email <a href="mailto:support@magikcommerce.com">support@magikcommerce.com </a>. Thank you very much! <br />
      <br />
      <strong>Vista HTML</strong> is Html5 + CSS3 Website template and works fine in all major browsers and IE from version 9. It's powered by jQuery. Also. The code is clearly written and you will find comments for each considerable parts. <br />
      <br />
      Lets take a closer look at the structure of Html, Css, JavaScript</p>
  </section>
  <section id="folder_structure">
    <h3>Folder Structure</h3>
    <hr class="notop">
    <p>When you unpack downloaded archive from ThemeForest.net you'll get folder containing 3 folders.</p>
    <p>Here they are, sorted alphabetically:</p>
    <ol>
      <li><strong>Documentation</strong> - Documentation for Vista HTML site template</li>
      <li><strong>HTML</strong> - Main folder for template</li>
  </ol>
  </section>
  <section id="html_structure">
    <h3>HTML Structure</h3>
    <hr class="notop">
    <p> Body part of the Html file is divided in three main sections and each of these sections is further divided into smaller parts: </p>
    <ol>
      <li>HEADER
        <ul>
          <li><strong>header</strong> - logo and navigation</li>          
          <li><strong>navigation</strong> - navigation bar</li>
          <li><strong>slider</strong> - slider holder</li>
        </ul>
      </li>
      <li>CONTENT
        <p>Content divided on pages:</p>
        <ul>
          <li>index.html - Home page</li>
          <li>grid.html - Product grid page</li>
          <li>list.html - Product listing page</li>
          <li>product_detail.html - Product detail page</li>
          <li>shopping_cart.html - shopping cart pages </li>
          <li>checkout.html, checkout_method.html, checkout_billing_info.html  - Checkout pages</li>
          <li>wishlist.html - Wishlist page</li>
          <li>dashboard.html - Dashboard page</li>
          <li>multiple_addresses.html - Multiple Addresses page </li>
          <li>about_us.html - About us page</li>
          <li>compare.html - Compare products' page</li>
          <li>delivery.html - Delivery information page</li>
          <li>faq.html - FAQ page</li>
          <li>quick_view.html - Product's quick view page</li>
          <li>newsletter.html - Newsletter pop-up page</li>
          <li>contact_us.html - Contact us page</li>
          <li>sitemap.html - Sitemap page</li>
          <li>blog.html, blog_detail.html - Blog content pages</li>
          <li>404error.html - Not found page</li>
          <li>login.html - Login page</li>
          
        </ul>     
        
        
        <pre class="brush: html">

						<!-- Content -->
							<section class="container">
							...  
							</section>
                        </pre>
      </li>
      <li>FOOTER
        <pre class="brush: html">
						    <div class="footer_bottom">
								Copyrights 2015 Magikcommerce.com
							</div>
						</pre>
      </li>
    </ol>
    <br />
    <br />
    <h5>Grid:</h5>
    <hr />
    <p>Based on Bootstrap, a sleek, intuitive, and powerful front-end framework.</p>
    <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
    <pre class="brush: html">
		&lt;!DOCTYPE html&gt;
        &lt;html lang="en"&gt;
            ...
        &lt;/html&gt;</pre>
    <p>The default Bootstrap grid system utilizes 12 columns.</p>
    <p>For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.col-lg-*</code> columns. As this is a 12-column grid, each <code>.col-lg-*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).</p>
    <pre class="brush: html">
		&lt;div class="row"&gt;
		  	&lt;div class="col-lg-4"&gt;...&lt;/div&gt;
		  	&lt;div class="col-lg-8"&gt;...&lt;/div&gt;
		&lt;/div&gt;</pre>
    <p>Given this example, we have .col-lg-4 and .col-lg-8, making for 12 total columns and a complete row.</p>
    <p>Move columns to the right using <code>.col-lg-push-*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.col-lg-push-2</code> moves <code>.col-lg-2</code> over two columns.</p>
    <pre class="brush: html">
		&lt;div class="row"&gt;
            &lt;div class="col-lg-4"&gt;...&lt;/div&gt;
            &lt;div class="col-lg-4 col-lg-push-2"&gt;...&lt;/div&gt;
        &lt;/div&gt;</pre>
    <br />
  </section>
  <section id="css_files_and_structure">
    <h3>CSS Files</h3>
    <hr class="notop">
    <p>All css files located at <strong>css</strong> folder.</p>
    <p>css/style.css - Theme main CSS file.</p>
  </section>
  <section id="javascript">
    <h3>JavaScript</h3>
    <hr class="notop">
    <p>All JS files located at <strong>js</strong> folder.</p>
    <p>js/common.js - Theme main JS file.</p>
  </section>
  <section id="sources_and_credits">
    <h3>Sources and Credits</h3>
    <hr class="notop">
    <p>I&#39;ve used the following images, icons or other files as listed.</p>
    <ul>
      <li><a href="http://jquery.com/">jQuery</a> - JavaScript Library</li>
      <li><a href="http://getbootstrap.com/">Bootstrap</a> - Bootstrap by Twitter</li>     
    </ul>
    <hr />
    <p>Once again, thank you for purchasing this Theme. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Theme. </p>
    <p>If you are satisfied with &quot;Vista HTML - site template&quot; please go to your downloads section on ThemeForest.net and rate Vista HTML with 5 stars.</p>
    <p>Hope that you will enjoy in Vista HTML as much as I've enjoyed designing this template.</p>
   
  </section>
</div>
</body>
</html>
